{% extends "base.html" %}
{% block title %}个人中心{% endblock %}

{% block content %}
<section class="profile-header">
    <div class="profile-avatar">
        <i class="fas fa-user-circle"></i>
    </div>
    <div class="profile-info">
        <h2>{{ username }}</h2>
        <p><i class="fas fa-envelope"></i> kangakng@midnight-library.com</p>
        <div class="member-status">
            <span class="vip-badge"><i class="fas fa-crown"></i> 黄金会员</span>
            <span>有效期至 2026-12-31</span>
        </div>
    </div>
</section>

<section class="profile-stats">
    <div class="stat">
        <h3>书架藏书</h3>
        <p>23</p>
    </div>
    <div class="stat">
        <h3>阅读时长</h3>
        <p>128 小时</p>
    </div>
    <div class="stat">
        <h3>加入时间</h3>
        <p>2025-01-15</p>
    </div>
</section>

<section class="profile-actions">
    <h2><i class="fas fa-cog"></i> 账户设置</h2>
    <div class="action-grid">
        <a href="#" class="action-card">
            <i class="fas fa-bookmark"></i>
            <h3>我的收藏</h3>
        </a>
        <a href="#" class="action-card">
            <i class="fas fa-history"></i>
            <h3>阅读历史</h3>
        </a>
        <a href="#" class="action-card">
            <i class="fas fa-bell"></i>
            <h3>消息通知</h3>
        </a>
        <a href="#" class="action-card">
            <i class="fas fa-moon"></i>
            <h3>夜间模式</h3>
        </a>
    </div>
</section>

<section class="recent-activity">
    <h2><i class="fas fa-clock"></i> 最近阅读</h2>
    <ul class="activity-list">
        <li>
            <i class="fas fa-book"></i>
            <div>
                <h3>三体</h3>
                <p>昨天 22:45 阅读至第 156 页</p>
            </div>
        </li>
        <li>
            <i class="fas fa-book"></i>
            <div>
                <h3>人类简史</h3>
                <p>前天 23:30 阅读至第 89 页</p>
            </div>
        </li>
        <li>
            <i class="fas fa-book"></i>
            <div>
                <h3>经济学原理</h3>
                <p>2025-06-20 21:15 阅读至第 203 页</p>
            </div>
        </li>
    </ul>
</section>
{% endblock %}